<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>云数据中心维护</title>
	<%@ include file="/WEB-INF/include/include.jsp" %>
	<script type="text/javascript" src="<%=path %>/js/rms/vdcmgr/VDCMgr.js"></script>
  </head>
  <body>
  		<div class="listpage-locked-content">
			<h2 class="listpage-lk-title" >云数据中心维护</h2>
			<div class="listpage-lk-search" id="searchWrap" ></div>
			<div class="listpage-lk-tbar" id="tbarWrap"></div>
		</div>
		
		<div class="listpage-content">
			<div class="listpage-grid" id="gridWrap"></div>
			<div class="listpage-grid" id="stackedBar"></div>
		</div>
		
  </body>
</html>

	<ui:page>

  	<ui:model name="GridVDCModel">
  		 <x:attr name="fields" type="array">
  			<ui:model.field name="VDC_ID"   ></ui:model.field>
  			<ui:model.field name="VDC_Name"  ></ui:model.field>
  			<ui:model.field name="VDC_Desc"  ></ui:model.field>
  			<ui:model.field name="VDC_Ststus"  ></ui:model.field>
  			<ui:model.field name="VDC_Enable"  ></ui:model.field>
  			<ui:model.field name="VDC_CpuLimit"   ></ui:model.field>
  			<ui:model.field name="VDC_CpuUsed"   ></ui:model.field>
  			<ui:model.field name="VDC_CpuAssign"  ></ui:model.field>
  			<ui:model.field name="VDC_CpuOverhead"   ></ui:model.field>
  			<ui:model.field name="VDC_CpuUnits"   ></ui:model.field>
  			<ui:model.field name="VDC_MemoryLimit"   ></ui:model.field>
  			<ui:model.field name="VDC_MemoryUsed"   ></ui:model.field>
  			<ui:model.field name="VDC_MemoryAssign"   ></ui:model.field>
  			<ui:model.field name="VDC_MemoryOverhead"   ></ui:model.field>
  			<ui:model.field name="VDC_MemoryUnits"   ></ui:model.field>
  			<ui:model.field name="VDC_MaxVMNum"   ></ui:model.field>
  			<ui:model.field name="VDC_HardDiskLimit"   ></ui:model.field>
  			<ui:model.field name="VDC_HardDiskUsed"   ></ui:model.field>
  			<ui:model.field name="VDC_HardDiskAssign"   ></ui:model.field>
  			<ui:model.field name="VDC_HardDiskOverHead"   ></ui:model.field>
  			<ui:model.field name="VDC_HardDiskUnits"   ></ui:model.field>
  			<ui:model.field name="VDC_MaxNetNum"   ></ui:model.field>
  		</x:attr>
  	</ui:model>
	
	<ui:quicksearch handler="VDCList.quickSearch" scope="VDCList" renderTo="searchWrap"></ui:quicksearch>
	<ui:b_toolbar menuCode="VDCMgr" id="toolbar"  renderTo="tbarWrap" />
	<ui:grid id="VDCGrid" showCheckbox="true" height="180"
		datasetName="VDCMgrDatasetHandler" 
		handlerName="VDCMgrQueryHandler" 
		model="GridVDCModel" renderTo="gridWrap"  >
		<x:columns>
			<ui:gridcolumn dataIndex="VDC_ID" hidden="true" ></ui:gridcolumn>
			<ui:gridcolumn text="云数据中心名称" dataIndex="VDC_Desc" />
			<ui:gridcolumn text="状态" dataIndex="VDC_Ststus"  renderer="VDCList.statusRender"  width="80"/>
			<ui:gridcolumn text="是否启用" dataIndex="VDC_Enable"  renderer="VDCList.isEnableRender"  width="80"/>
			<ui:gridcolumn text="已使用CPU" dataIndex="VDC_CpuUsed" width="80" renderer="VDCList.cpuRender" />
			<ui:gridcolumn text="CPU分配" dataIndex="VDC_CpuAssign" width="80" renderer="VDCList.cpuRender" />
			<ui:gridcolumn text="CPU限制" dataIndex="VDC_CpuLimit" width="80" renderer="VDCList.cpuRender" />
			<ui:gridcolumn text="CPU超出" dataIndex="VDC_CpuOverhead" width="80" renderer="VDCList.cpuRender" />
			<ui:gridcolumn text="已使用内存" dataIndex="VDC_MemoryUsed" width="80" renderer="VDCList.memoryRender"/>
			<ui:gridcolumn text="内存分配" dataIndex="VDC_MemoryAssign" width="80" renderer="VDCList.memoryRender"/>
			<ui:gridcolumn text="内存限制" dataIndex="VDC_MemoryLimit" width="80" renderer="VDCList.memoryRender"/>
			<ui:gridcolumn text="内存超出" dataIndex="VDC_MemoryOverhead" width="80" renderer="VDCList.memoryRender" />
			<ui:gridcolumn text="已使用存储" dataIndex="VDC_HardDiskUsed" width="80" renderer="VDCList.hardDiskRender"/>
			<ui:gridcolumn text="存储分配" dataIndex="VDC_HardDiskAssign" width="80" renderer="VDCList.hardDiskRender"/>
			<ui:gridcolumn text="存储限制" dataIndex="VDC_HardDiskLimit" width="80" renderer="VDCList.hardDiskRender"/>
			<ui:gridcolumn text="存储超出" dataIndex="VDC_HardDiskOverHead" width="80" renderer="VDCList.hardDiskRender" />
			<ui:gridcolumn text="最大主机数" dataIndex="VDC_MaxVMNum" width="80" />
			<ui:gridcolumn text="最大网络数" dataIndex="VDC_MaxNetNum" width="80"/>
		</x:columns>
		<x:listeners>
			<x:handler name="itemdblclick" funcName="VDCList.goToVapp"></x:handler>
			<x:handler name="itemclick" funcName="VDCList.loadChart"></x:handler>
		</x:listeners>
	</ui:grid>
	
	<ui:searchform id="VDCSearchForm">
		<x:items>
			<ui:formPanel.text id="VDC_Name" fieldLabel="名称包含" config="true"></ui:formPanel.text>
			<ui:formPanel.comboxstatic id="VDC_Enable" fieldLabel="是否启用" data="[[true,'启用'],[false,'禁用']]" config="true"></ui:formPanel.comboxstatic>
		</x:items>
	</ui:searchform>
	<ui:advSearchWindow searchFormId="VDCSearchForm" id="advSearchWin" 
	searchHandlerscope="VDCList" searchHandler="VDCList.advSearch" 
	height="200" width="300"/>	
	
	<x:bottomScript>
	
	Ext.require('Ext.chart.*');
	Ext.require('Ext.layout.container.Fit');
		
	var store = Ext.create('Ext.data.JsonStore', {
	        fields: ['kind', '使用率', '未使用率', '超出率', 'total'],
	        data: [ ]
	    });    
	    
	var panel1 = Ext.create('widget.panel', {
	    	autoWidth: true,
	        height: 300,
	        title: '云中心资源使用情况',
	        renderTo: "stackedBar",
	        layout: 'fit',
	        items: {
	            xtype: 'chart',
	            animate: true,
	            shadow: true,
	            store: store,
	            id:'chart',
	            legend: {
	                position: 'right'
	            },
	            axes: [{
	                type: 'Numeric',
	                position: 'bottom',
	                fields: ['使用率', '未使用率', '超出率'],
	                title: false,
	                grid: true,
	                label: {
	                    renderer: function(v) {
	                    	return String(v)+"%";//.replace(/(.)00$/, '.$%');
	                    	 }
	                    },
                	roundToDecimal: false
            		}, 
            		{
	                type: 'Category',
	                position: 'left',
	                fields: ['kind'],
	                title: false
	            	}
	            ],
	            series: [{
	                type: 'bar',
	                axis: 'bottom',
	                gutter: 80,
	                xField: 'kind',
	                yField:  ['使用率', '未使用率', '超出率'],
	                stacked: true,
	                tips: {
	                    trackMouse: true,
	                    width: 120,
	                    height: 40,
	                    renderer: function(storeItem, item) {
	           				var value = storeItem.data.total*parseFloat(item.value[1])/100;
	                    	if(storeItem.data.kind=="cpu")
	                        	this.setTitle("占总分配"+storeItem.data.total+"MHz的"+item.value[1]+"%约"+String(value+"MHz"));
                        	else{
                        		this.setTitle("占总分配"+storeItem.data.total+"MB的"+item.value[1]+"%约"+String(value+"MB"));
                        	}
	                    }
	                }
	            }]
	        }
	    });
	</x:bottomScript>

	</ui:page>

	
